<template>
	<div @click.stop="onClickHandler" :class="[selected ?'label-selected-state' : 'label-normal-state']" style="display: inline-block;position: relative;">
		<i class="el-icon-rank drag-widget" style="position: absolute;left: 0px;top:0px;z-index: 100;" v-show="selected"></i>
		<van-icon  :name="componentModel.iconClass"/>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignIconComponent",
		props: [
			"componentModel"
		],beforeMount() {
			if(this.componentModel.iconClass==undefined){
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,"iconClass", "chat-o");
			}
		},
		data() {
			return {
				selected:false,
				"propertySet": [{
						"key": "ID",
						"label": "ID",
						"editor": "label"
					},
					{
						"key": "iconClass",
						"label": "图标Class",
						"editor": "text"
					},{
						"key": "cssStyleExpression","label":"cssStyle","editor":"textarea",
					},
					{
						"key": "readonly",
						"label": "只读逻辑",
						"editor": "textarea"
					},
					{
						"key": "visible",
						"label": "显示逻辑",
						"editor": "textarea"
					},
					{
						"key": "onClickExpression",
						"label": "单击事件",
						"editor": "textarea"
					},{
						"key": "confirmMessage",
						"label": "确认消息",
						"editor": "textarea"
					}
				]
			}
		},
		inject:['children'],
		mounted() {
			this.children.push(this);
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			onClickHandler() {
				formDesignerUtil.mobileComponentClickHandler(this);
			},
			getPropertyValue(propertyKey) {
				if(propertyKey=="ID"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				}else if(propertyKey=="iconClass"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"iconClass");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},
			setPropertyValue(propertyKey, propertyValue) {
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,propertyKey, propertyValue);
				if (propertyKey == "iconClass") {
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"iconClass",propertyValue);
				}
			},setSelected(selected){
				this.selected=selected;	
			}
		}
	}
</script>

<style>
</style>
